<template>
  <view>
    <view class="uni-padding-wrap uni-common-mt">
      <uni-segmented-control
        :current="current"
        :values="items"
        :style-type="styleType"
        :active-color="activeColor"
        @clickItem="onClickItem"
      />
    </view>
    <view class="content">
      <view v-if="current === 0">
        <view class="search-bg">
          <view class="example pad30">
            <uni-search-bar
              radius="100"
              placeholder="请输入您要搜索的医生"
              v-model="doctorSearch"
              @confirm="search"
              @cancel="cancelClick"
              @clear="cancelClick"
            />
          </view>
        </view>
        <view class="root">
          <ren-dropdown-filter
            ref="son"
            :filterData="filterData"
            :defaultIndex="defaultIndex"
            :doctorSearch="doctorSearch"
            :nowCount="nowCount"
            @ed="ed"
            @dateChange="dateChange"
            @send="handleClick"
            :condition="condition"
            @handle="handleOk"
          ></ren-dropdown-filter>
        </view>
        <view class="" v-if="doctorList.length <= 0">
          <image
            src="../../static/images/icon_lack_message@2x.png"
            mode=""
            style="
              width: 500rpx;
              height: 500rpx;
              margin: 220rpx auto;
              display: block;
            "
          ></image>
        </view>
        <view style="margin-top: 90rpx;" v-else-if="doctorList.length > 0">
          <view
            class="doctorListStyle"
            v-for="(item, index) in doctorList"
            :key="index"
            @click="navatoList(item.doctorId)"
          >
            <view class="doctorHeader" style="margin-top: 20rpx;">
              <image :src="item.icon"></image>
            </view>
            <view style="padding: 10px 0px;">
              <view>
                <text class="fontSize32">{{ item.name }}</text>
                <text class="fontSize28 md-8">{{ item.jobTitle }}</text>
                <text class="fontSize28" style="margin-left: 17rpx;">
                  {{ item.deptName }}
                </text>
              </view>
              <view
                style="
                  width: 500rpx;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                <text class="fontSize28">{{ item.hospitalName }}</text>
              </view>
              <view
                style="
                  width: 500rpx;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                <text class="fontSize27" style="color: #6c6c6c;">
                  擅长:{{ item.areasExpertise }}
                </text>
              </view>
              <view>
                <text class="doctorone">精选医生</text>
                <text class="doctortwo">业内专家</text>
                <text class="doctorthree">专业审核优秀</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-if="current === 1">
        <view class="" v-if="doctorHistoryList.length <= 0">
          <image
            src="../../static/images/icon_lack_message@2x.png"
            mode=""
            style="
              width: 500rpx;
              height: 500rpx;
              margin: 220rpx auto;
              display: block;
            "
          ></image>
        </view>
        <view v-else-if="doctorHistoryList.length > 0">
          <view
            class="doctorListStyle"
            v-for="(item, index) in doctorHistoryList"
            :key="index"
            @click="doctorHistory(item.doctorId)"
          >
            <view class="doctorHeader" style="margin-top: 20rpx;">
              <image :src="item.icon"></image>
            </view>
            <view style="padding: 20rpx 10rpx;">
              <view
                style="
                  width: 500rpx;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                <text class="fontSize32">{{ item.name }}</text>
                <text class="fontSize28 md-8">{{ item.jobTitle }}</text>
                <text class="fontSize28">{{ item.deptName }}</text>
              </view>
              <view
                style="
                  width: 500rpx;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                <text class="fontSize28 md-8">{{ item.hospitalName }}</text>
              </view>
              <view
                style="
                  width: 500rpx;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                "
              >
                <text class="fontSize27" style="color: #6c6c6c;">
                  擅长:{{ item.areasExpertise }}
                </text>
              </view>
              <view>
                <text class="doctorone">精选医生</text>
                <text class="doctortwo">业内专家</text>
                <text class="doctorthree">专业审核优秀</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
import { getSyDoctorList, getAllStandardDept } from '@/api/user.js'
export default {
  components: {
    RenDropdownFilter,
  },
  data() {
    return {
      items: ['所有医生', '历史咨询'],
      current: 0,
      activeColor: '#52D0BB',
      styleType: 'text',
      condition: {
        flag: 1, //1查询所有医生，2查询历史咨询医生
        // isOpen: "", //0：开启在线复诊 1：未开启
        // isFreeClinic: '', //0：开启在线义诊 1：未开启
        doctorName: '',
        pageNum: 1, //第几页
        pageSize: 10, //每页显示条数
        // standardDeptId: 0,    //标准科室id
      },
      doctorList: [], //所有医生列表
      doctorHistoryList: [], //历史咨询列表
      filterData: [
        [
          {
            text: '问诊咨询',
            value: 0,
          },
          {
            text: '免费咨询',
            value: 2,
          },
        ],
      ],
      // 科室筛选
      stateList: [],
      defaultIndex: [0, 0],
      doctorSearch: '',
      contentText: {
        contentdown: '查看更多',
        contentrefresh: '加载中...',
        contentnomore: '没有更多',
      },
      total: 0, //总条数
      nowCount: 0, //当前累计显示条数
      childDeptId: 0, //科室id
    }
  },
  onLoad: function (option) {},
  onShow() {
    this.nowCount = 0
    this.total = 0
    this.condition.pageNum = 1
    this.doctorList = []
    this.getDocList()
  },
  onReachBottom() {
    if (this.nowCount > 0 && this.nowCount >= this.total) {
      this.statusLoad = 'noMore'
    } else {
      this.showLoadMore = true
      this.statusLoad = 'loading'
      this.getDocList()
    }
  },
  methods: {
    handleClick(res) {
      this.doctorList = res
    },
    ed(res) {
      console.log(res)
    },
    dateChange(d) {
      this.childDeptId = d.deptId //子组件传来的科室id
      if (this.childDeptId) {
        this.condition.standardDeptId = this.childDeptId
      }
      uni.showToast({
        icon: 'none',
        title: d.value,
      })
    },
    search() {
      this.$refs.son.popupShow = false
      this.$refs.son.showMask = false
      this.$refs.son.actNav = null

      this.condition.doctorName = this.doctorSearch
      if (this.childDeptId) {
        this.condition.standardDeptId = this.childDeptId
      }
      this.nowCount = 0
      this.total = 0
      this.condition.pageNum = 1
      this.doctorList = []
      this.getDocList()
    },
    handleOk(res) {
      this.condition = res
      this.nowCount = 0
      this.total = 0
      this.condition.pageNum = 1
      this.doctorList = []
      this.getDocList()
    },
    cancelClick() {
      this.condition.pageNum = 1
      this.condition.doctorName = ''
      this.getDocList()
    },
    onClickItem(e) {
      let _that = this
      if (_that.current !== e.currentIndex) {
        _that.current = e.currentIndex
      }
      _that.condition = {
        flag: 1, //1查询所有医生，2查询历史咨询医生
        doctorName: '',
        pageNum: 1,
        pageSize: 10,
      }
      _that.doctorHistoryList = []
      _that.doctorList = []
      if (_that.current == 1) {
        //this.current == 1 历史咨询
        _that.condition.flag = 2
      } else if (_that.current == 0) {
        _that.condition.flag = 1
        _that.doctorSearch = ''
      }
      _that.getDocList()
    },
    // 查询医生列表
    getDocList() {
      let _this = this
      let newData = []
      let doctorList = _this.doctorList,
        doctorHistoryList = _this.doctorHistoryList
      let nowCount = _this.nowCount
      let pageNum = _this.condition.pageNum
      getSyDoctorList(_this.condition)
        .then((res) => {
          this.doctorList = res.rows

          if (_this.condition.flag == 1) {
            // 所有医生
            if (pageNum != 1) {
              newData = doctorList.concat(res.rows)
            } else {
              newData = res.rows
            }
            _this.$set(_this, 'doctorList', newData) //使用$set可以避免this直接赋值，在组件上【有时】不及时生效的问题（偶尔会出现）
          } else if (_this.condition.flag == 2) {
            // 历史咨询
            if (pageNum != 1) {
              newData = doctorHistoryList.concat(res.rows)
            } else {
              newData = res.rows
            }
            _this.$set(_this, 'doctorHistoryList', newData) //使用$set可以避免this直接赋值，在组件上【有时】不及时生效的问题（偶尔会出现）
          }
          //设置分页
          _this.total = res.total
          _this.condition.pageNum = pageNum + 1
          _this.nowCount = nowCount + res.rows.length
        })
        .catch((err) => {
          console.log('错误#', res)
        })
    },
    // 查询科室
    // doctorDepartment() {
    // 	getAllStandardDept()
    // 		.then((res) => {
    // 			this.stateList = res.data
    // 			console.log(this.stateList,'我是接口')
    // 		})
    // 		.catch((err) => {
    // 			console.log('错误#', res)
    // 		})
    // },
    // 跳转医生详情页
    navatoList(doctorId) {
      uni.navigateTo({
        url: `/pagesSub/homePage/prescribing/doctorView?doctorId=${doctorId}`,
      })
    },
    doctorHistory(doctorId) {
      uni.navigateTo({
        url: `/pagesSub/homePage/prescribing/doctorView?doctorId=${doctorId}`,
      })
    },
  },
}
</script>

<style>
.uni-common-mt {
  position: fixed;
  width: 100%;
  /* border: 1px solid red; */
  background: #fff;
  top: 0;
  z-index: 999;
}

.search-bg {
  position: fixed;
  width: 100%;
  top: 67rpx;
  background-color: #fff;
  z-index: 999;
}

/deep/.uni-searchbar__text-placeholder.data-v-180dbe05 {
  font-size: 29rpx !important;
}

/deep/.uni-icons.data-v-a2e81f6e {
  font-size: 35rpx !important;
}

/deep/.uni-searchbar__cancel.data-v-180dbe05 {
  font-size: 29rpx !important;
}

/deep/.uni-searchbar__box-search-input.data-v-180dbe05 {
  font-size: 29rpx !important;
  /* background-color: #fff !important; */
}

.doctorListStyle {
  display: flex;
  /* padding: 30rpx; */
  margin: 15rpx 20rpx;
  border-bottom: 1px solid #eeeeee;
  background-color: #fff;
  border-radius: 15rpx;
  position: relative;
  top: 90rpx;
}

.doctorHeader {
  width: 100rpx;
  height: 100rpx;
  /* border: 1px solid #000000; */
  margin-right: 20rpx;
  margin-left: 40rpx;
}

.doctorHeader > image {
  width: 100%;
  height: 100%;
  margin-left: 20rpx;
  margin-top: 20rpx;
}

.fontSize32 {
  font-size: 32rpx;
  margin-left: 30rpx;
  font-weight: 900;
}

.fontSize28 {
  font-size: 28rpx;
  margin-left: 30rpx;
}

.fontSize27 {
  font-size: 27rpx;
  margin-left: 30rpx;
}

.doctorone {
  font-size: 26rpx;
  color: #fab101;
  margin-left: 30rpx;
}

.doctortwo {
  font-size: 26rpx;
  margin-left: 7px;
  color: #fab101;
}

.doctorthree {
  font-size: 26rpx;
  margin-left: 7px;
  color: #fab101;
}

.md-8 {
  margin-left: 31rpx;
}
</style>
